<template>
	<view class="test-container">
		<view class="test-section">
			<text class="section-title">测试 base64ToImageUrl</text>
			<view class="input-group">
				<textarea v-model="base64Input" placeholder="请输入base64字符串" class="text-area" maxlength="-1" auto-height />
				<button @tap="testBase64ToImageUrl">测试转换</button>
			</view>
			<image v-if="convertedImage" :src="convertedImage" mode="aspectFit" class="test-image"></image>
		</view>
		
		<view class="test-section">
			<text class="section-title">测试 getImageFromResponse</text>
			<view class="input-group">
				<textarea v-model="responseInput" placeholder="请输入模拟的响应JSON" class="text-area" maxlength="-1" auto-height />
				<button @tap="testGetImageFromResponse">测试提取</button>
			</view>
			<image v-if="extractedImage" :src="extractedImage" mode="aspectFit" class="test-image"></image>
		</view>
		
		<view class="test-section">
			<text class="section-title">测试 isValidBase64Image</text>
			<view class="input-group">
				<textarea v-model="validityInput" placeholder="请输入要验证的字符串" class="text-area" maxlength="-1" auto-height />
				<button @tap="testIsValidBase64Image">测试验证</button>
			</view>
			<text class="result-text">验证结果: {{validityResult}}</text>
		</view>
		
		<view class="test-section">
			<text class="section-title">测试实际验证码接口</text>
			<button @tap="testRealCaptcha">获取验证码</button>
			<image v-if="realCaptchaImage" :src="realCaptchaImage" mode="aspectFit" class="test-image"></image>
		</view>
	</view>
</template>

<script>
import { base64ToImageUrl, getImageFromResponse, isValidBase64Image } from '../../uni_modules/utils/base64Image.js';
import api from '../common/api.js';

export default {
	data() {
		return {
			// base64ToImageUrl 测试
			base64Input: '',
			convertedImage: '',
			
			// getImageFromResponse 测试
			responseInput: '',
			extractedImage: '',
			
			// isValidBase64Image 测试
			validityInput: '',
			validityResult: '',
			
			// 实际验证码测试
			realCaptchaImage: ''
		}
	},
	methods: {
		// 测试 base64ToImageUrl
		testBase64ToImageUrl() {
			try {
				this.convertedImage = base64ToImageUrl(this.base64Input);
				uni.showToast({
					title: '转换成功',
					icon: 'success'
				});
			} catch (error) {
				uni.showToast({
					title: '转换失败: ' + error.message,
					icon: 'none'
				});
			}
		},
		
		// 测试 getImageFromResponse
		testGetImageFromResponse() {
			try {
				const response = JSON.parse(this.responseInput);
				this.extractedImage = getImageFromResponse(response);
				uni.showToast({
					title: '提取成功',
					icon: 'success'
				});
			} catch (error) {
				uni.showToast({
					title: '提取失败: ' + error.message,
					icon: 'none'
				});
			}
		},
		
		// 测试 isValidBase64Image
		testIsValidBase64Image() {
			try {
				const isValid = isValidBase64Image(this.validityInput);
				this.validityResult = isValid ? '有效' : '无效';
				uni.showToast({
					title: '验证完成',
					icon: 'success'
				});
			} catch (error) {
				uni.showToast({
					title: '验证失败: ' + error.message,
					icon: 'none'
				});
			}
		},
		
		// 测试实际验证码接口
		testRealCaptcha() {
			api.getCaptcha()
				.then(res => {
					if (res.statusCode === 200 && res.data.success) {
						this.realCaptchaImage = getImageFromResponse(res.data);
						uni.showToast({
							title: '获取成功',
							icon: 'success'
						});
					} else {
						uni.showToast({
							title: '获取失败',
							icon: 'none'
						});
					}
				})
				.catch(err => {
					console.error('获取验证码失败:', err);
					uni.showToast({
						title: '获取失败: ' + err.message,
						icon: 'none'
					});
				});
		}
	}
}
</script>

<style lang="scss">
.test-container {
	padding: 30rpx;
	
	.test-section {
		margin-bottom: 40rpx;
		padding: 20rpx;
		background-color: #f8f8f8;
		border-radius: 10rpx;
		
		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
			display: block;
		}
		
		.input-group {
			display: flex;
			flex-direction: column;
			gap: 20rpx;
			margin-bottom: 20rpx;
			
			.text-area {
				width: 100%;
				min-height: 200rpx;
				max-height: 600rpx;
				padding: 20rpx;
				border: 1px solid #ddd;
				border-radius: 8rpx;
				font-size: 28rpx;
				background-color: #fff;
				word-break: break-all;
				white-space: pre-wrap;
				overflow-y: auto;
				line-height: 1.5;
				
				&::placeholder {
					color: #999;
				}
			}
			
			button {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 28rpx;
				background: #007AFF;
				color: #fff;
				border-radius: 8rpx;
				
				&:active {
					opacity: 0.8;
				}
			}
		}
		
		.test-image {
			width: 100%;
			height: 200rpx;
			background-color: #fff;
			border: 1px solid #ddd;
			border-radius: 8rpx;
			object-fit: contain;
		}
		
		.result-text {
			font-size: 28rpx;
			color: #333;
			word-break: break-all;
		}
	}
}
</style> 